<template>
<div>
	<!--头部-->
	<div class="jwrap">
	<div class="my-top">
		<a href="#/"><img class="my-jian" src="../assets/img/duanhuowang/zuo.png" alt=""/></a>
		<span class="my-pin">我的商城</span>
		<a href="#/MyShenDeng"><span class="sdd">神灯值</span><img class="my-fan" src="../assets/img/gerenzhongxin/kefu/duo.png" alt=""/></a>
	</div>
	<p class="ybao">
		<span>100</span>
		<img src="../assets/img/gerenzhongxin/kefu/yuanbao.png" alt=""/>
	</p>
	</div>
	<!--查找你想要的商品-->
	<div id="my-top" class="my-int">
		<input type="text" id="my-duo" value="查找你想要的商品" />
		<img class="my-tu" src="../assets/img/shouye/tuijian/sousuo.png" alt=""/>
	</div>
	
	
	
	<!--精选导航-->
	<div class="my-jin">
		<nav class="my-active">精选</nav>
		<nav>面膜</nav>
		<nav>母婴</nav>
		<nav>美妆</nav>
		<nav>眼妆<img class="my-up" src="../assets/img/gerenzhongxin/kefu/up.png" alt=""/></nav>
	
	<!--点击精选出现-->
	<div class="my-fenlei">
		<p class="my-suoyou">所有商品分类</p>
		<p class="my-xiaolei">
		<a class="my-fenhong">精选</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a>
		</p>
	</div>
	<!--点击面膜出现-->
	<div class="my-fenlei">
		<p class="my-suoyou">所有商品分类</p>
		<p class="my-xiaolei">
		<a class="my-fenhong">面膜</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>粉霜</a><a>榜上有名</a><a>粉霜</a><a>榜上有名</a><a>粉霜</a><a>榜上有名</a>
		</p>
	</div>
	<!--点击母婴出现-->
	<div class="my-fenlei">
		<p class="my-suoyou">所有商品分类</p>
		<p class="my-xiaolei">
		<a class="my-fenhong">母婴</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a>
		</p>
	</div>
	<!--点击美妆出现-->
	<div class="my-fenlei">
		<p class="my-suoyou">所有商品分类</p>
		<p class="my-xiaolei">
		<a class="my-fenhong">美妆</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a>
		</p>
	</div>
	<!--点击眼妆出现-->
	<div class="my-fenlei">
		<p class="my-suoyou">所有商品分类</p>
		<p class="my-xiaolei">
		<a class="my-fenhong">眼妆</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a>
		</p>
	</div>
	
	</div>
	
	<!--商品-->
	<div v-for="ww in 30">
	<div class="my-danqu">
		<div class="my-timg">
		<img class="my-kitty" src="../assets/img/shouye/lunbo/fang4.png" alt=""/>
		</div>
		<div class="my-twen">
		<p class="my-zi">蜗牛饰容BB霜50g</p>
		<p class="my-mongy"><span class="my-qq">500</span><img src="../assets/img/gerenzhongxin/kefu/yuanbao.png" alt=""/></p>
		<p class="my-qiang">￥22.30</p>
		</div>
	</div>
	<!--右边-->
	<div class="my-rdanqu">
		<div class="my-ktimg">
		<img class="my-kitty" src="../assets/img/shouye/lunbo/fang4.png" alt=""/>
		</div>
		<div class="my-twen">
		<p class="my-zi">蜗牛饰容BB霜50g</p>
		<p class="my-mongy"><span class="my-qq">500</span><img src="../assets/img/gerenzhongxin/kefu/yuanbao.png" alt=""/></p>
		<p class="my-qiang">￥22.30</p>
		</div>
	</div>
 </div>
  <!--点击回到顶部-->
		<a href="#my-top">
			<div class="my-ding">
			<img src="../assets/img/shouye/pinpai/dingbu.png" alt=""/>
			<p class="my-fanding">返回顶部</p>
			</div>
		</a>
 <!---->
</div>
</template>

<script>
	export default {
		methods:{
			mycheng:function(){
				$(".my-xiaolei>a").click(function(){
					$(this).addClass("my-fenhong").siblings("a").removeClass("my-fenhong");
				})
			},
			mydao:function(){
			$("nav").attr("dao",false);
			var index = 0;
			$("nav").click(function(){
				$(this).addClass("my-active").siblings("nav").removeClass("my-active");
				$(".my-fenlei").eq($(this).index()).addClass("my-fenshow").siblings(".my-fenlei").removeClass("my-fenshow");
			
				if ($(this).attr("dao") == "false") {
					$(".my-fenlei").eq($(this).index()).slideDown(500).siblings(".my-fenlei").hide();
					$(this).attr("dao",true);
				}else if ($(this).attr("dao") == "true") {
					$(".my-fenlei").eq($(this).index()).slideUp(500);
					$(this).attr("dao",false);
				}
			})
		},
		},
		mounted:function(){
			this.mycheng();
			this.mydao();
		}
	}
</script>

<style>
	/*头部*/
	.jwrap{
		width: 100%;
		position: fixed;
		top:0;
		left:0;
		background: #e53e42;
		z-index: 200;
	}
	.my-top {
		width: 100%;
		height: 9.6rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index:100;
	}
	
	.my-pin {
		color: white;
		font-size: 3.6rem;
		text-align: center;
		padding:0 10rem 0 20rem;
		font-weight: 200;
	}
	
	.my-jian {
		width: 2.3rem;
	}
	
	.my-fan {
		width: 3.4rem;
	}
	.sdd{
		font-size: 3rem;
		color:#FFFFFF;
		padding-right: 2rem;
		font-weight: 100;
	}
	/*金子*/
	.ybao{
		height: 7.6rem;
		text-align: center;
		line-height: 7.6rem;
		color:#FFCD2C;
		font-size: 4.8rem;
	}
	/*查找跟多商品*/
	.my-int{
		height: 6rem;
		font-size: 2.4rem;
		margin-top: 19.2rem;
		position: relative;
	}
	#my-duo{
		width: 68rem;
		height: 4.8rem;
		border:0.1rem solid red;
		text-align: center;
		border-radius: 1rem;
		line-height: 4.8rem;
		margin-left: 2rem;
		background: #F2F2F2;
		color:#F8545F;
	}
	.my-tu{
		width: 2.8rem;
		height: 3rem;
		position: absolute;
		top:1.2rem;
		left:23rem;
	}
	/*精选导航*/
	.my-jin{
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 8rem;
		font-size: 2.4rem;
		background: #680a0c;
		line-height: 8rem;
		margin-top: 2rem;
		position: relative;
	}
	.my-jin>nav{
		color:rgba(255,255,255,0.9);
	}
	.my-jin .my-active{
		color:#FFCD2C;
		border-bottom: 0.5rem solid #FFCD2C;
	}
	.my-up{
		width: 2.4rem;
	}
	/*单个BB霜🍪*/
	.my-danqu{
		width: 32rem;
		height: 44rem;
		background: #FFFFFF;
		margin:0 2.5rem;
		text-align: center;
		float:left;
		border:0.1rem solid #CCCCCC;
	}
	.my-timg,.my-ktimg{
		width: 100%;
		height: 26.3rem;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	.my-kitty{
		width: 6.4rem;
		height: 17.2rem;
		margin:4.6rem 0;
	}
	.my-twen{
		width: 100%;
		height: 17.6rem;
	}
	.my-zi{
		width: 30rem;
		font-size: 2.4rem;
		padding: 1.5rem 0 0.5rem 2rem;
		text-align: center;
		color:#4d4d4d;
	}
	.my-mongy{
		font-size: 2.4rem;
		color:red;
	}
	.my-qiang{
		font-size: 2.2rem;
		color:#808080;
		margin:auto;
		margin-top: 1rem;
		text-decoration:line-through;
		font-weight: 200;
	}
	.my-qq{
		padding-right: 1rem;
	}
	/*右*/
	.my-rdanqu{
		width: 32rem;
		height: 44rem;
		border: 0.1rem solid #CCCCCC;
		background: #FFFFFF;
		text-align: center;
		margin:0 2rem 1rem 0;
		float:left;
	}
	/*点击出现所有商品分类*/
	.my-fenlei{
		width: 100%;
		background: #FFFFFF;
		border-bottom: 0.01rem solid #808080;
		position: absolute;
		top:8rem;
		display: none;
	}
	.my-suoyou{
		width: 100%;
		height: 5rem;
		line-height: 5rem;
		font-size: 2.8rem;
		color:#808080;
		padding:1rem 0 0 2rem;
		border-bottom: 0.01rem solid #808080;
	}
	.my-xiaolei{
		width: 100%;
	}
	.my-xiaolei>a{
		display: inline-block;
		font-size: 2.8rem;
		padding: 0 1rem;
		color:#4D4D4D;
	}
	.my-xiaolei .my-fenhong{
		color:red;
	}
		/*返回顶部*/
	.my-ding{
		position: fixed;
		right:0.4rem;
		bottom: 17.5rem;
	}
	.my-ding>img{
		width: 4.8rem;
		height: 4.8rem;
		margin-left: 8.2rem;
	}
	.my-fanding{
		font-size: 2.4rem;
		color:red;
		text-align: right;
		font-weight: 150;
		padding-top: 1rem;
	}
</style>